<template>
	<view>
		<!-- 轮播图 -->
		<!-- 轮播 -->
		<view class="swiper-box">
			<swiper   autoplay=true interval=2000 circular=true indicator-dots=true style="width: 100%; height: 320px;">
				<swiper-item  >
					<image :src="goodsInfo.pic" style="width: 100%; height: 320px;"></image>
				</swiper-item>
				
			</swiper>
			<view class="icons-box">
				<uni-icons class="icons"  type="star" size="40" color="#ffffff" ></uni-icons>
			</view>
		</view>
		<!-- 文字展示 -->
		<view class="text-box">
			<view class="text1">
				<text class="text1-1">&#36{{goodsInfo.price}}.00</text>
				<text class="text1-2">&#36{{goodsInfo.price}}.00</text>
				<text class="text1-3">没有促销使用原价</text>
			</view>
			<view class="text2">{{goodsInfo.name}}</view>
			<view class="text3">{{goodsInfo.description}}</view>
		</view>
		
		<!--照片展示 -->
		<!-- <view   v-html="goodsInfo.detailMobileHtml"></view> -->
		<mp-html  :tag-style="style"   :content="goodsInfo.detailMobileHtml" />
		<!-- 底部栏 -->
		<uni-goods-nav  class="bottom-item"  :fill="true"  :options="options" :buttonGroup="buttonGroup"  @click="onClick" @buttonClick="buttonClick" />
		<!-- 模态框                               ↓ ↓ ↓ ↓阻止页面滚动-->    
		<view class="mask" v-if="current"  @touchmove.stop.prevent="">
			<view class="mask-content">
				<uni-icons type="close" size="30" class="mask-icon" @tap="maskEvent"></uni-icons>
				<view class="mask-info" v-for="(item,index) in skuLists" :key="item.id">
					
					<image :src="item.pic"></image>
				<view class="mask-text">
					<view>单人沙发</view>
					<view>库存数量</view>
				</view>
				<view class="select">
					商品选择
					<view v-for="ele in item.spData">{{ele}}</view> 
				</view>
				<view class="service">
					特色服务
					<view class="service-text1">送货上门</view>
					<view class="service-text1">上门安装</view>
					</view>
					<view class="num">
						<view class="num-left">购买数量</view>
						<view class="num-right">
							<text @tap="jian(index,item.id)">-</text>
							<text>{{start}}</text>
							<text @tap="jia(index)">+</text>
						</view>
					</view>
					<view class="ok">
						
						<button type="primary" @click="btnEvent">确定</button>
					</view>
				</view>
				
			</view>
			
		</view>
		<!-- 立即购买模态框 -->
		<view class="mask" v-if="current2"  @touchmove.stop.prevent="">
			<view class="mask-content">
				<uni-icons type="close" size="30" class="mask-icon" @tap="maskEvent"></uni-icons>
				<view class="mask-info" v-for="(item,index) in skuLists" :key="item.id">
					
					<image :src="item.pic"></image>
				<view class="mask-text">
					<view>单人沙发</view>
					<view>库存数量</view>
				</view>
				<view class="select">
					商品选择
					<view v-for="ele in item.spData">{{ele}}</view> 
				</view>
				<view class="service">
					特色服务
					<view class="service-text1">送货上门</view>
					<view class="service-text1">上门安装</view>
					</view>
					<view class="num">
						<view class="num-left">购买数量</view>
						<view class="num-right">
							<text @tap="jian(index,item.id)">-</text>
							<text>{{start}}</text>
							<text @tap="jia(index)">+</text>
						</view>
					</view>
					<view class="ok">
						
						<button type="primary" @tap="noWEvent">确定</button>
					</view>
				</view>
				
			</view>
			
		</view>
		<!-- 尾巴 -->
	</view>
</template>

<script>
import{
	productDetail
}from "@/api/kind/index.js"
import{
	addCart,
	addPreOrder
}from "@/api/cart/index.js"
  import uniGoodsNav from '@/components/uni-goods-nav/uni-goods-nav.vue'
	export default {
		components: {uniGoodsNav},
		data() {
			return {
				start:1,
				current:false,
				current2:false,
				productId:"",
				id:"",
				skuLists:{},
				goodsInfo:{},
			list:[],
				style:{
					p:'	margin-bottom: 100px;',
					img:'width:90%; height: 465px; display: block; margin: 0 auto;'
				},
				 options: [{
				            icon: 'headphones',
				            text: '客服'
				        }],
				        buttonGroup: [{
				          text: '加入购物车',
				          backgroundColor: '#ff0000',
				          color: '#fff'
				        },
				        {
				          text: '立即购买',
				          backgroundColor: '#ffa200',
				          color: '#fff'
				        }
				        ]
			};
		},
		onLoad(ele){
			productDetail(ele.id)
			.then(res =>{
				console.log(res)
				this.goodsInfo = res.data.data.product,
				this.skuLists = res.data.data.product.skuList,
				
				// 把skuList下的每一个id保存到这个list数组中(skuId)
				this.list =this.skuLists.filter(ele=>ele.id)
				
				this.id = res.data.data.product.skuList[0].id,
				console.log(this.id)
				// 这一块不会        ↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓
				console.log(JSON.parse(res.data.data.product.skuList[0].spData))
				
				
				
				uni.setNavigationBarTitle({
					title:res.data.data.product.name,
					
					
				})
			}),
			  this.init()
		},
		 methods: {
			 // 添加到购物车
			 init(){
				 
				 addCart({
					 productId: this.goodsInfo.id,
					   productSkuId: this.id,
					   quantity: this.start
				 }).then(res =>{
					 console.log(res)
					 if(res.data.success == true){
						 uni.showToast({
						 	title:"添加成功",
						 	icon:"success"
						 })
					 }
				 })
			 },
			maskEvent(){
				this.current = false,
				this.current2 = false
			},
			 // 点击客服
		      onClick (e) {
				 
		        uni.showToast({
		          title: "客服功能暂未开通",
		          icon: 'none'
		        })
		      },
			  // 点击两个btn  加入购物车是2//立即购买是1
		      buttonClick (e) {
		        console.log(e)
				if(e.index ==1){
					console.log(1)
					var token = uni.getStorageSync("token")
					if(token){
						this.current2 = true
					}else{
						uni.showModal({
							title:"登录提示",
							content:"暂未登录,是否前往登录页面",
							success(res){
								console.log(res)
								if(confirm){
									uni.navigateTo({
										url:"/pages/user/login/login"
									})
								}else{
							uni.showToast({
								title:"已取消"
							})
						}
							}
							
						})
					}
				}else{
					// 这里是点击添加购物车
					this.current = true
					
				}
		        
		      },
			  // 点击减号
			  jian(index,id){
				 
				  var _this = this;
				 if(this.start >1){
					 this.start --;
				 }else{
					 uni.showToast({
					 	title:"商品不能为空!",
					 	icon:"none"
					 })
				 }
			  },
			  // 点击加号
			  jia(index){
				   this.start ++;
			  },
			  // 加入购物车的点击确定
			  btnEvent(){
				  console.log("?????")
				  this.init()
				  
				  
			  },
			  // 立即购买里的确定
			  noWEvent(){
				  var obj ={
					  "orderItemList": [
					      {
					       
					        productId: this.goodsInfo.id,
							// productId,
					        productQuantity: this.start,
					        productSkuId: this.id
					      }
					    ],
				  }
				  addPreOrder(obj)
				  .then(res=>{
					  console.log(res)
					  if(res.data.success ==true){
					  	uni.showToast({
					  		title: "购买成功，1s后进入确认订单界面",
					  		icon: "success"
					  	})
					  	var id = res.data.data.orderId;
					  	setTimeout(res =>{
					  		uni.navigateTo({
					  			url:`/pages/home/cart/order/order?id=${id}`
					  		})
					  	},1000)
					  }else{
						  uni.showToast({
						  	title: res.data.message,
						  	icon: "none" 
						  })
					  }
				  })
			  }
		    }
		
		
	}
</script>

<style lang="scss" scoped>
.swiper-box{
	position: relative;
	.icons-box{
		width: 60px;
		height:60px;
		background-color: #33363D;
		 display: flex;
		 align-items: center;
		 border-radius: 50%;
		position: absolute;
		right: 50px;
		bottom: -30px;
		
		.icons{
			
			margin: 0 auto;
		
			
		}
	}
}
// 文字展示区
.text-box{
	margin: 50px auto ;
	width: 80%;
	height: 180px;
	
	.text1{
		.text1-1{
			font-size: 20px;
			color: red;
			font-weight: 900;
		}
		.text1-2{
			font-size: 12px;
			color: #BBB5B5;
		}
		.text1-3{
			background-color: red;
			color: #FFFFFF;
			// margin-left: 5px;
		}
	}
	.text2{
			line-height: 50px;
	}
	.text3{
		font-size: 12px;
		width: 300px;
	word-wrap: break-word;
	}
}
// 底部栏
.bottom-item{
	position: fixed; bottom: 0; left: 0;
	width: 100%;
}
// 模态框
/* 模态框 */
.mask{
  width: 100%;
  height: 100%;
  background: rgba(0, 0,0, .6);
  position: fixed;
  top: 0;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.mask .mask-content{
 border-radius: 16px;
 position: relative;
  width: 320px;
  height: 460px;
 background-color: #FFFFFF;
 
  .mask-icon{
	  position: absolute;
	  top: 20px;
	  right: 20px;
  }
  .mask-info{
	
	  position: relative;
	  image{
		  display: block;
		  width: 100px;
		  height: 100px;
		  position: absolute;
		  left: 30px;
		  top: -30px;
		  border-radius: 16px;
	  }
	  .mask-text{
		  position: absolute;
		  top: 40px;
		  right: 120px;
	  }
	  .select{
		   position: absolute;
		   top: 100px;
		   left: 30px;
	  }
	  .service{
		  position: absolute;
		  top: 200px;
		  left: 30px;
		
		  .service-text1{
			  height: 30px;
			  width: 260px;
			margin: 10px 0;
			border-radius: 16px;
			line-height: 30px;
			  background-color: #C0C0C0;
		  }
	  }
	  .num{
		  position: absolute;
		  top: 350px;
		  left: 30px;
		  display: flex;
		 .num-right{
			 text{
				 display: block;
				 width: 40px;
				 height: 30px;
				 border: 1px #000000 solid;
				 line-height: 30px;
				 background-color: #2B85E4;
				 color: #FFFFFF;
				 text-align: center;
			 }
			   display: flex;
			   justify-content: flex-end;
			   position: absolute;
			   top: 0px;
			   left: 90px;
			   
		 }
	  }
	  .ok{
		  position: absolute;
		  bottom: -450px;
		  left: 110px;
		  background-color: red;
	  }
  }
}
</style>
